<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title>导入分区</title>

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <!-- <link href="__STATIC__/layout/css/common.css" rel="stylesheet"> -->
    <link href="__STATIC__/layout/css/channel.css?v={:rand()}" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">

    <style>
        body{
            color:#333;
        }
        .border_S {
            border-bottom: 1px solid #ccc;
        }
        .row {
            margin: 0;
            padding: 0
        }
        
        .col-md-6>.labelTxt,
        .col-md-3>.labelTxt {
            width: 100px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 40px;
            border-right: 1px solid #ccc;
            text-align: center;
            padding-right: 10px
        }
        
        .col-md-4>.labelTxt,
        .col-md-8>.labelTxt,
        .col-md-12>.labelTxt {
            width: 150px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 40px;
            border-right: 1px solid #ccc;
            text-align: center;
            padding-right: 10px
        }
        
        .col-md-4>.input4,
        .col-md-12>.input12,
        .col-md-3>.input3,
        .col-md-6>.input6,
        .col-md-8>.input8 {
            margin-left: 15px
        }
        
        .col-md-1:nth-of-type(1) {
            border-left: 1px solid #ccc
        }
        
        .col-md-1:nth-of-type(2) {
            border-right: 1px solid #ccc
        }
        
        .col-md-8 {
            border-left: 1px solid #ccc
        }
        
        .col-md-12 {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc
        }
        
        .col-md-8>.input8 {
            display: inline-block;
            width: 300px;
            height: 26px;
        }
        
        .col-md-6>.input6 {
            display: inline-block;
            width: 220px;
            height: 26px
        }
        
        .col-md-4>.input4 {
            display: inline-block;
            width: 160px;
            height: 26px
        }
        
        .col-md-12>.input12 {
            display: inline-block;
            width: 300px;
            height: 26px
        }
        
        .col-md-3>.input3 {
            display: inline-block;
            height: 26px;
            width: 120px
        }
        
        .col-md-1>.input1 {
            display: inline-block;
            height: 26px;
            width: 60px
        }
        
        .col-md-2>.input2 {
            display: inline-block;
            height: 26px;
            width: 40px
        }
        
        .col-md-2>.input22 {
            display: inline-block;
            height: 26px;
            width: 80px
        }
        
        .col-md-2>.input21 {
            display: inline-block;
            height: 26px;
            width: 120px
        }
        
        .col-md-4:nth-of-type(1) {
            border-left: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
        }
        
        .col-md-4:nth-of-type(2) {
            border: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
        }
        
        .labelTxt .colorRed {
            color: red;
        }
        
        .select1 {
            margin-left: 15px;
            display: inline-block;
            width: 150px;
            font-size: 14px;
        }
        
        select.form-control {
            height: 26px;
            padding: 0 12px 1px;
        }
        
        .col-md-1,
        .col-md-2,
        .col-md-6,
        .col-md-3 {
            background: #fff;
            text-align: center;
            line-height: 40px;
            border-right: 1px solid #ccc
        }
        
        .beizhu {
            line-height: 70px;
        }
        
        .beizhu .labelTxt {
            width: 100px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 70px;
            border-right: 1px solid #ccc;
            text-align: center;
            padding-right: 10px
        }
        
        .beizhu textarea {
            margin-left: 15px;
            vertical-align: middle;
        }
        
        .sub_btn {
            padding: 20px 0
        }
        
        .sub_btn .btn {
            margin-right: 15px;
        }
        
        .addManInfo,
        .delthis {
            float: right;
            margin-right: 30px;
            margin-top: 7px;
            font-size: 14px;
            padding: 2px 9px;
        }
    </style>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <!-- <script src="js/hplus.js?v=4.1.0"></script> -->
    <!-- <script type="text/javascript" src="js/contabs.js"></script> -->

    <!-- 第三方插件 -->
    <!-- layer javascript -->
    <script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
    <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
    <script src="__STATIC__/layout/js/plugins/pace/pace.min.js"></script>
    <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <!-- Sweet Alert -->
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- Sweet alert -->
     <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
</head>

<body class="white-bg">
       <div class="page-heade">
       <h2 class="title_color text-center">经销商基本信息</h2>
    </div>
    <form action="{:url('add')}" id="agencyOperationInfo" class="form-inline">
        {if $import}
        <input type="hidden" name="import" value="{$import}">
        {/if}

    <table class="table table-bordered">
        <tr>
            <td><label for="fenqu">销售分区<span class="colorRed">*</span>：</label></td>
            <td>
                 <select name="zoning" id="fenqu" class="form-control select1">
                    <option value="">请选择</option>
                         {volist name="fenqu" id="row"}
                    <option value="{$row.id}">{$row.title}</option>
                         {/volist}
                 </select>
            </td>
            <td><label for="provice">销售省份<span  class="colorRed">*</span>：</label></td>
            <td>   <select name="provice" id="provice" class="form-control select1">
                    <option value="">请选择</option>
            </select></td>
            <td><label for="city">销售城市<span  class="colorRed">*</span>:</label></td>
            <td>  <select name="city" id="city" class="form-control select1">
                    <option value="">请选择</option>
                </select></td>
        </tr>
        <tr>
           <td> <label for="">经销商编号<span  class="colorRed">*</span>：</label></td>
           <td  colspan="5"> <input type="text" name="sn" class="form-control">
            <span style="color: red;cursor: default;">(温馨说明:经销商编号添加成功后不允许再修改，请确认经销商编号正确无误)</span></td>
        </tr>
        <tr>
            <td><label for="title">经销商名称<span  class="colorRed">*</span>：</label></td>
            <td colspan="3"> <input type="text" name="title" id="title" style="" class="form-control" size="70">
            <a href="javascript:;" style="color: red;text-decoration: none;cursor: ">不允许英文状态下输入单引号！</a></td>
            <td><label for="channeltype">渠道类型<span  class="colorRed">*</span>：</label></td>
            <td>
              <select name="channeltype" id="channeltype" class="form-control select1">
                <option value="">请选择</option>
                {volist name="cg_channel_types1" id="row"}
                <option value="{$row.id}">{$row.title}</option>
                {/volist}
              </select>
            </td>
        </tr>
        <tr>
            <td> <label for="">是否为直营</label></td>
            <td>
                <input type="radio" name="direct" id="optionsRadios1" value="0" checked style="margin-left: 15px">是
                <input type="radio" name="direct" id="optionsRadios2" value="1" checked>否
            </td>
            <td> <label for="types">经销商等级<span  class="colorRed">*</span>：</label></td>
            <td>
              <select name="types" id="types" class="form-control select1">
                <option value="">请选择</option>
                <option value="1">其他</option>
                <option value="2">核心经销商</option>
                <option value="3">二级经销商</option>
                <option value="4">一级经销商</option>
              </select>
            </td>
            <td>
                <label for="">开始合作时间<span  class="colorRed">*</span></label>
            </td>
            <td>
              <input type="text" name="cooptime" id="hello" class="form-control layer-date" style="width: 150px;margin-top:-4px;margin-left: 15px">
            </td>
        </tr>
        <tr>
            <td><label for="costrate">经销商目标费用率：</label></td>
            <td> <input type="text" name="costrate" id="costrate" style="display: inline-block; width: 50px;height: 22px;margin-left: 15px" class="form-control"><a href="javascript:;" style="color: #333;cursor: default;text-decoration: none;">%</a></td>
            <td><label for="" class="labelTxt">发票类型</label></td>
            <td colspan="3">
                 
            <input type="radio" name="invoicetype" id="optionsRadios3" value="0" style="margin-left: 15px">增值税发票
            <input type="radio" name="invoicetype" id="optionsRadios4" value="1" checked>普通发票
            </td>
        </tr>
        <tr>
            <td><label for="testNoBtn">业务人员：</label></td>
            <td colspan="5" style="position: relative;">
                   <div style="    width: 224px;
            position: absolute;
            left: 10px;
            top: 3px;">
                <div class="input-group">
                    <input name="stuff" id="testNoBtn" type="text" placeholder="请输入关键字或空格查询" class="input12 form-control" value="">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                  
                </div><a href="javascript:;" id="select" style="    position: absolute;
    top: 3px;
    left: 232px;
    display: inline-block;
    width: 50px;">选择</a>
            </div>

            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="5" style="position: relative;"><div class="renyuan" id="renyuan" style="top:5px;left:5px">
                    </div></td>
        </tr>
         <script>
            $(function () {
                $('body').on('click','.renyuan span.close',function () {
                    $(this).parent('.ren').remove();
                })
//              选择管理人员
                $('#select').on('click',function () {
                    var index = layer.getFrameIndex(window.name)
                    //iframe层-父子操作
                    layer.open({
                        type: 2,
                        title: '请选择业务人员',
                        area: ['500px', '400px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '{:url("selectsalesman")}?frameindex='+index
                    });
                    return false
                })

                /**
                 * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
                 */
                $("#testNoBtn").bsSuggest({
                    url: "{:url('provicejson')}",
                    /*effectiveFields: ["userName", "shortAccount"],
                    searchFields: [ "shortAccount"],*/
                    effectiveFieldsAlias:{userName: "姓名"},
                    ignorecase: true,
                    showHeader: true,
                    showBtn: false,     //不显示下拉按钮
                    delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                    idField: "id",
                    keyField: "title",
                    clearable: true
                }).on('onDataRequestSuccess', function (e, result) {
                    console.log('onDataRequestSuccess: ', result);
                }).on('onSetSelectValue', function (e, keyword, data) {
                    $(this).val('')
                    var bool = false
                    $('#renyuan .ren').each(function (idx,o) {
                        if($(this).data('id') == keyword.id){
                            bool = true;
                        }
                    })
                    if(bool == false)
                        $('#renyuan').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
                    //console.log('onSetSelectValue: ', keyword, data);
                }).on('onUnsetSelectValue', function () {
                    console.log("onUnsetSelectValue");
                });

            })
        </script>
        <tr>
            <td><label for="">详细地址<span  class="colorRed">*</span></label></td>
            <td colspan="5"><input type="text" name="addr" style="display: inline-block; width: 350px;" class="form-control"></td>
        </tr>
        <tr>
          <td colspan="6" class="font-bold info" style="font-size: 14px;">经销商联络信息</td>
        </tr>
        <tr>
          <td><label for="contact1">客户联系人1<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="contact1" id="contact1" style="" class="form-control"></td>
          <td><label for="mobile1">手机1<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="mobile1" id="mobile1" style="" class="form-control"></td>
          <td><label for="phone1">联系电话:<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="phone1" id="phone1" style="" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="contact2">客户联系人2：</label></td>
            <td><input type="text" name="contact2" id="contact2" class="form-control"></td>
            <td><label for="mobile2" class="labelTxt">手机2</label></td>
            <td><input type="text" name="mobile2" id="mobile2" class="form-control"></td>
            <td><label for="phone2">联系电话:</label></td>
            <td><input type="text" name="phone2" id="phone2" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="mailaddr">邮寄地址<span  class="colorRed">*</span>：</label></td>
            <td colspan="3"><input type="text" name="mailaddr" id="mailaddr" style="" class="form-control"></td>
            <td><label for="zipcode">邮编：</label></td>
            <td><input type="text" name="zipcode" id="zipcode" class="form-control"></td>
        </tr>
        <tr>
          <td colspan="6" style="padding: 1px">
            <div class="row border_S manTitle">
             <div class="col-md-1">姓名</div>
             <div class="col-md-2">电话</div>
             <div class="col-md-2">手机</div>
             <div class="col-md-2">传真</div>
             <div class="col-md-2">电子邮件</div>
             <div class="col-md-2">职务</div>
             <div class="col-md-1" style="height: 40px"><button class="btn btn-success addManInfo">添加</button></div>
            </div>
          </td>
        </tr>
        <tr>
            <td colspan="6" class="font-bold info" style="font-size:14px;">经销商财务信息</td>
        </tr>
        <tr>
            <td><label for="legalrepre">法定代表人<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="cw_legalrepre" id="legalrepre" class="form-control"></td>
            <td><label for="lrphone">法人固定电话</label></td>
            <td><input type="text" name="cw_lrphone" id="lrphone" class="form-control"></td>
            <td><label for="lrmobile">法人手机</label></td>
            <td><input type="text" name="cw_lrmobile" id="lrmobile" class="form-control"></td>
        </tr>
        <tr>
          <td><label for="lremail">法人电子邮箱</label></td>
          <td><input type="text" name="cw_lremail" id="lremail" class="form-control"></td>
          <td><label for="">纳税资格</label></td>
          <td>
            <input type="radio" name="cw_qualification" id="optionsRadios5" value="0" checked style="margin-left: 15px">一般纳税人
            <input type="radio" name="cw_qualification" id="optionsRadios6" value="1" checked>小规模纳税人
          </td>
          <td><label for="taxsn">税号<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="cw_taxsn" id="taxsn" class="input4 form-control"></td>
        </tr>
        <tr>
          <td><label for="bank">开户行<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="cw_bank" id="bank" class="form-control"></td>
          <td><label for="banksn">开户账号<span  class="colorRed">*</span></label></td>
          <td><input type="text" name="cw_banksn" id="banksn" class="form-control"></td>
          <td><label for="creditperiod">信用账期</label></td>
          <td><input type="text" name="cw_creditperiod" id="creditperiod" class="form-control"><i style="display: inline-block;">(天)</i></td>
        </tr>
        <tr>
            <td><label for="creditlimit">信用额</label></td>
            <td><input type="text" name="cw_creditlimit" id="creditlimit" class="form-control">(元)</td>
            <td><label for="">邮寄地址<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="cw_mailaddr" class="form-control"></td>
            <td><label for="">邮编</label></td>
            <td><input type="text" name="cw_zipcode" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="">财务联系人</label></td>
            <td><input type="text" name="cw_contact" class="form-control"></td>
            <td><label for="">财务联系电话</label></td>
            <td><input type="text" name="cw_phone" class="form-control"></td>
            <td><label for="">财务电子邮箱</label></td>
            <td><input type="text" name="cw_email" class="form-control"></td>
        </tr>
        <tr>
            <td colspan="6" class="info font-bold" style="font-size: 14px">经销商业务联系资料</td>
        </tr>
        <tr>
            <td><label for="">业务联系人<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_contact" class="form-control"></td>
            <td><label for="">业务联系固定电话<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_phone" class="form-control"></td>
            <td><label for="">业务联系手机<span class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_mobile" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="">业务联系传真<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_fax" class="form-control"></td>
            <td><label for="">收货单位<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_rcv_unit" class="form-control"></td>
            <td><label for="">收货地址<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_rcv_addr" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="">收货人<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="bs_rcv_one" class="form-control"></td>
            <td><label for="">收货人电话<span  class="colorRed">*</span></label></td>
            <td colspan="3"><input type="text" name="bs_rcv_phone" class="form-control"></td>
        </tr>
        <tr>
            <td colspan="6" class="font-bold info" style="font-size: 14px;">经销商物流信息</td>
        </tr>
        <tr>
            <td><label for="">收货地址1<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="lgs_rcv_addr" class="form-control"></td>
            <td><label for="">收货人1<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="lgs_rcv_one" class="form-control"></td>
            <td><label for="">联系电话1<span  class="colorRed">*</span></label></td>
            <td><input type="text" name="lgs_rcv_phone" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="">收货地址2</label></td>
            <td><input type="text" name="lgs_rcv_addr2" class="form-control"></td>
            <td><label for="">收货人2</label></td>
            <td><input type="text" name="lgs_rcv_one2" class="form-control"></td>
            <td><label for="">联系电话2</label></td>
            <td><input type="text" name="lgs_rcv_phone2" class="form-control"></td>
        </tr>
        <tr>
            <td><label for="">收货地址3</label></td>
            <td><input type="text" name="lgs_rcv_addr3" class="form-control"></td>
            <td><label for="">收货人3</label></td>
            <td><input type="text" name="lgs_rcv_one3" class="form-control"></td>
            <td><label for="">联系电话3</label></td>
            <td> <input type="text" name="lgs_rcv_phone3" class="form-control"></td>
        </tr>
        <tr>
            <td class="beizhu"> <label for="">备注</label></td>
            <td colspan="5">
                  <textarea name="brief" id="" class="form-control" style="display: inline-block; user-select:none;width: 70%;height: 60px;overflow: scroll;"></textarea>
            </td>
        </tr>
    </table>
       

    <!-- 经销商物流信息 -->
    <div style="width: 98%;padding:20px 0 20px 2%;background: #fff">
        <div id="uploader" class="wu-example">
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件</div>
                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </div>
            <input type="hidden" name="attach" id="attach">
        </div>
        <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
    </div>
    <div class="row sub_btn" style="width:100%;text-align:center;">
        <input type="button" class="btn btn-success" id="tijiao" value="提交">
        <a type="button" class="btn btn-warning" href="{if $import}{:url('index',array('import'=>1))}{else}{:url('index')}{/if}">返回</a>
    </div>
    </form>
    <script>
        $('#fenqu').on('change',function () {
            if($(this).val()){
                $('#provice').load('{:url("zcity/getprovices")}?id='+$(this).val())
                $('#city').html('<option value="">请选择</option>')
            }else
                $('#provice').html('<option value="">请选择</option>')
        })
        $('#provice').on('change',function () {
            if($(this).val())
                $('#city').load('{:url("jxsgl/getcities")}?id='+$(this).val())
            else
                $('#city').html('<option value="">请选择</option>')
        })
        //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

       
    </script>
    <script>
        $(document).ready(function() {
            //提交
            $('#tijiao').on('click',function () {
                var form =  $('#agencyOperationInfo')
                var serial = form.not($('input[name=stuff]')).serialize()

                var admin = []
                $('#renyuan .ren').each(function (idx,o) {
                    admin.push($(o).data('id'))
                })
                var admin2 = ''
                if(admin)
                    admin2 = admin.join(',')

                serial = serial+'&stuff='+admin2
                console.log(serial)
                $.ajax({
                    'type':'post',
                    'url':form.attr('action'),
                    'data':serial,
                    'dataType':'json',
                    'success':function (data) {
                        if(data.success){
                            swal({
                                title: data.msg,
                                type: "success"
                            },function(){
                                {if $import}
                                location.href = '{:url("index",array("import"=>1))}'
                                {else}
                                location.href = '{:url("index")}'
                                {/if}
                            });

                        }else
                            swal({
                                title: data.msg,
                                type: "warning"
                            });
                    }
                })
                return false
            })

            $(".addManInfo").on("click", function() {
                console.log(1)
                var str = '<div class="row border_S  manInfo"><div class="col-md-1"><input type="text" name="jxsll[name][]" class="form-control input1" ></div><div class="col-md-2"><input type="text" name="jxsll[phone1][]" class="form-control input2">-<input type="text" name="jxsll[phone2][]" class="form-control input22" ></div><div class="col-md-2"><input type="text" name="jxsll[mobile][]" class="form-control input21"></div><div class="col-md-2"><input type="text" name="jxsll[fax1][]" class="form-control input2">-<input type="text" name="jxsll[fax2][]" class="form-control input22"></div><div class="col-md-2"><input type="text" name="jxsll[email][]" class="form-control input21" ></div><div class="col-md-2"><input type="text" name="jxsll[job][]" class="form-control input21" ></div><div class="col-md-1" style="height: 40px"><button class="btn btn-danger delthis">删除</button></div></div>'
                $(this).parents(".manTitle").after(str);
                return false
            })
            $(document).on("click", ".delthis", function() {
                console.log($(this).parents(".manInfo").remove())
            })
        })
    </script>

    <!-- Web Uploader -->
    <script type="text/javascript">
        // 添加全局站点信息
        var BASE_URL = '__STATIC__/layout/js/plugins/webuploader';
    </script>
    <script src="__STATIC__/layout/js/plugins/webuploader/webuploader.min.js"></script>

    <script>
        // 文件上传
        jQuery(function() {
            var $ = jQuery,
                $list = $('#thelist'),
                $btn = $('#ctlBtn'),
                state = 'pending',
                uploader;

            var ids = [];
            uploader = WebUploader.create({

                // 不压缩image
                resize: false,

                // swf文件路径
                swf: BASE_URL + '/js/Uploader.swf',

                // 文件接收服务端。
                server: '{:url("upload/fileupload")}',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker'
            });

            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                $list.append( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });

            uploader.on( 'uploadSuccess', function( file,response) {
                if(response.success)
                    ids.push(response.id)
                $( '#'+file.id ).find('p.state').text(response.msg);
            });

            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $('#attach').val(ids.join(','))
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            uploader.on( 'all', function( type ) {
                if ( type === 'startUpload' ) {
                    state = 'uploading';
                } else if ( type === 'stopUpload' ) {
                    state = 'paused';
                } else if ( type === 'uploadFinished' ) {
                    state = 'done';
                }

                if ( state === 'uploading' ) {
                    $btn.text('暂停上传');
                } else {
                    $btn.text('开始上传');
                }
            });

            $btn.on( 'click', function() {
                if ( state === 'uploading' ) {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
                return false
            });
        });
    </script>
</body>

</html>
